<template>
  <div class="custom-tree-container">
    <el-input
      v-if="showSearch"
      v-model="filterText"
      maxlength="10"
      show-word-limit
      clearable
      placeholder="请输入分组名称"
    />
    <el-tree
      ref="leftTreeRef"
      :data="treeData"
      :current-node-key="currentNodeKey"
      :highlight-current="highlightCurrent"
      :show-checkbox="showCheckbox"
      :node-key="nodeKey"
      :default-expand-all="defaultExpandAll"
      :default-expanded-keys="defaultExpandedKeys"
      :expand-on-click-node="expandOnClickNode"
      :filter-node-method="filterNode"
      @node-click="nodeClick"
    >
      <template #default="{ node, data }">
        <span class="custom-tree-node">
          
          <slot name="tree-item" :node="node" :data="data">
            <span>{{ data[treeProps["label"]] }}</span>
          </slot>
<!-- 
          <el-popover
            v-if="showLittlePoint && data[nodeKey] !== 'all'"
            placement="right"
            :width="defaultWidth"
            :trigger="trigger"
          >
            <template #reference>
              <el-icon class="icon-MoreFilled" :size="14"><MoreFilled /></el-icon>
            </template>
            <span class="_operation">
              <el-icon
                :size="18"
                v-if="operation?.includes('edit')"
                @click.left="edit(data)"
                style="margin-left: 20px"
                ><EditPen
              /></el-icon>
              <el-icon
                v-if="operation?.includes('del')"
                @click.left="del(data)"
                :size="18"
                ><Delete
              /></el-icon>
              <el-icon
                v-if="operation?.includes('add') && data[showAdd]"
                @click.left="add(data)"
                :size="18"
                ><Plus
              /></el-icon>
            </span>
          </el-popover> -->
          <el-dropdown
            v-if="showLittlePoint && data[nodeKey] !== 'all'"
            :trigger="trigger"
            v-has="littlePointPermissions"
          >
            <span class="el-dropdown-link">
              <el-icon class="icon-MoreFilled" :size="14"><MoreFilled /></el-icon>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <slot name="drop-down-item" :node="node" :data="data">
                  <el-dropdown-item
                      v-if="operation?.includes('edit')"
                      @click.left="edit(data)"
                      v-has="buttonEdit"
                  >
                    编辑
                  </el-dropdown-item>
                  <el-dropdown-item
                      v-if="operation?.includes('del')"
                      @click.left="del(data)"
                      v-has="buttonDel"
                  >
                    删除
                  </el-dropdown-item>
                  <el-dropdown-item
                      v-if="operation?.includes('add') && data[showAdd]"
                      @click.left="add(data)"
                      v-has="buttonAdd"
                  >
                    新增
                  </el-dropdown-item>
                </slot>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </span>
      </template>
    </el-tree>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
const props = withDefaults(
  defineProps<{
    treeData: string[];
    treeProps?: object;
    showCheckbox?: boolean;
    expandOnClickNode?: boolean;
    defaultExpandAll?: boolean;
    nodeKey?: string;
    highlightCurrent?: boolean; // 高亮当前选中
    currentNodeKey?: string | number; // 默认选中
    defaultExpandedKeys?: string[];
    showLittlePoint?: boolean; // 是否展示三个点
    littlePointPermissions?: string[]; // 三个点的权限
    showSearch?: boolean; // 是否展示搜索框
    trigger?: string; // 触发方式
    operation?: string[]; // 操作按钮
    showAdd?: string;
    defaultWidth?: number;
    buttonAdd?: string[];
    buttonEdit?: string[];
    buttonDel?: string[];
    // showDel?: string; // 有需要自己放开
    // showEdit?: string;
  }>(),
  {
    showCheckbox: false,
    expandOnClickNode: true,
    defaultExpandAll: false,
    nodeKey: "id",
    currentNodeKey: "",
    defaultExpandedKeys: ["all"] as any,
    highlightCurrent: true,
    showLittlePoint: true,
    showSearch: true,
    trigger: "hover",
    operation: ["add", "del", "edit"] as any,
    defaultWidth: 150,
    showAdd: "nodeType",
    littlePointPermissions: ()=>[],
    buttonAdd: ()=>[],
    buttonEdit: ()=>[],
    buttonDel: ()=>[],
    // showDel: 'true',
    // showEdit: 'true',
    treeProps: () => {
      return {
        label: "name",
      };
    },
  }
);
const { currentNodeKey, defaultExpandedKeys, treeData } = toRefs(props);
watch(currentNodeKey, (val) => {
  setCurrentKey(val);
});

const { treeProps } = toRefs(props);
const leftTreeRef = ref();
const filterText = ref("");
const filterNode = (value: string, data: any) => {
  if (!value) return true;
  return data[treeProps.value["label"]].includes(value);
};

// 设置高亮
const setCurrentKey = (id: any) => {
  if (id) {
    leftTreeRef.value.setCurrentKey(id, true, true);
  } else {
    leftTreeRef.value.setCurrentKey("all", true, true);
  }
};

const removeTreeNode = (data: any) => {
  leftTreeRef.value.remove(data);
};
const nodeClick = (node: any, data: any) => {
  console.log(node, data);
  emit("getTreeNodeId", node, data);
};
watch(filterText, (val) => {
  leftTreeRef.value!.filter(val);
});

const edit = (data: any) => {
  emit("edit", data);
};
const add = (data: any) => {
  emit("add", data);
};
const del = (data: any) => {
  emit("del", data);
};
defineExpose({ removeTreeNode, setCurrentKey });
const emit = defineEmits(["getTreeNodeId", "add", "del", "edit"]);
</script>

<style lang="scss" scoped>
.custom-tree-node {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  // &:hover .icon-MoreFilled {
  //   display: block;
  //   transform: rotate(-90deg);
  // }
}
.custom-tree-node .icon-MoreFilled {
  // transform: rotate(-90deg);
  // display: none;
}
:deep(.is-current) {
  color: #0052d9;
}
:deep(.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content) {
  background: #e8f2ff !important;
}
:deep(.el-tree-node__content) {
  height: 32px;
  line-height: 32px;
}
.el-input {
  margin-top: 12px;
  margin-bottom: 12px;
}
._operation {
  .el-icon {
    cursor: pointer;
    margin-right: 24px;
  }
}
.custom-tree-node {
  overflow: hidden;
  :first-child {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
.el-dropdown-link {
  margin-left: 10px;
}
</style>
